<style>
    .slider-wrapper {
        width: 500px;
        height: 300px;
        overflow: hidden;
        margin: 50px auto;
        position: relative;
        border: 1px solid #ccc;
    }
    
    .slider-content {
        width: 2500px;
        height: 100%;
    }
    
    .slider-content>li {
        width: 500px;
        height: 300px;
        float: left;
        font-size: 100px;
        line-height: 300px;
        text-align: center;
        font-weight: bold;
    }
    
    .slider-content>li.one {
        background-color: red;
    }
    
    .slider-content>li.two {
        background-color: blue;
    }
    
    .slider-content>li.three {
        background-color: yellow;
    }
    
    .slider-content>li.four {
        background-color: green;
    }
    
    .slider-content>li.five {
        background-color: pink;
    }
    
    .nav {
        width: 50px;
        height: 50px;
        background-color: gray;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -25px;
        cursor: pointer;
    }
    
    .nav-right {
        left: auto;
        right: 0;
    }
    
    .slider-nav-wrapper {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
    }
    
    .slider-nav-wrapper>li {
        float: left;
        margin-right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: black;
        cursor: pointer;
    }
    
    .slider-nav-wrapper>li.on {
        background-color: #fff;
    }
</style>

<div class="slider-wrapper">
    <ul class="slider-content">
        <li index="0" class="one">1</li>
        <li index="1" class="two">2</li>
        <li index="2" class="three">3</li>
        <li index="3" class="four">4</li>
        <li index="4" class="five">5</li>
    </ul>
    <ol class="slider-nav-wrapper">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="">
        <div class="nav nav-left"></div>
        <div class="nav nav-right"></div>
    </div>

    <script>
        let width = $('.slider-content > li').width()
        let $imgWrapper = $('.slider-content');

        function init() {
            initEvent()
        }

        function initEvent() {
            $('.nav').on('click', onNavClick)
            $('.slider-nav-wrapper').on('click', 'li', onSliderNavWrapperClick)
        }

        function onSliderNavWrapperClick() {
            if ($(':animated').length > 0) {
                return
            }

            let newIndex = $(this).index()
            let oldIndex = $imgWrapper.find('li:first').attr('index')

            if (newIndex > oldIndex) {

                $imgWrapper
                    .animate({
                        'margin-left': -(newIndex - oldIndex) * width
                    }, 500, function() {
                        for (let i = 0; i < newIndex - oldIndex; i++) {
                            $imgWrapper.append($imgWrapper.find('li:first'))
                        }
                        $(this)
                            .css('marginLeft', 0)
                        changeIconColor()
                    })
            } else if (newIndex < oldIndex) {
                for (let i = 0; i < oldIndex - newIndex; i++) {
                    $imgWrapper.prepend($imgWrapper.find('li:last'))
                }
                $imgWrapper
                    .css('marginLeft', -(oldIndex - newIndex) * width)
                    .animate({
                        'marginLeft': 0
                    }, 500, function() {
                        changeIconColor()
                    })
            }
        }

        function onNavClick() {
            let $this = $(this)
            if ($(':animated').length > 0) {
                return
            }
            if ($this.hasClass('nav-right')) {
                $('.slider-content').animate({
                    'margin-left': -width
                }, 500, function() {
                    $(this)
                        .css('marginLeft', 0)
                        .append($(this).find('li:first'))
                    changeIconColor()
                })
            } else {
                $('.slider-wrapper ul')
                    .prepend($('.slider-wrapper ul>li:last'))
                    .css({
                        'marginLeft': -width
                    })
                    .animate({
                        'marginLeft': 0
                    }, 500, function() {
                        changeIconColor()
                    })
            }
        }

        function changeIconColor() {
            let currIndex = $imgWrapper.find('li:first').attr('index')
            $('.slider-nav-wrapper')
                .find('li')
                .eq(currIndex)
                .addClass('on')
                .siblings('.on')
                .removeClass('on')
        }

        init()
    </script>
</div>